<template>
  <view class="container">
    <view>
      <uv-navbar title="我的" bgColor="none" :placeholder="true">
        <template v-slot:left>
        </template>
      </uv-navbar>
      <!-- 用户信息 -->
      <view class="header">
        <view class="user">
          <view class="user-left">
            <uv-avatar :src="userInfo.avatar" width="120rpx" height="120rpx" shape="circle"></uv-avatar>
            <view class="user-info">
              <text class="nickname">{{ userInfo.userName }} {{
                  userInfo.deptName ? '( ' + userInfo.deptName + ' )' : ''
                }}
              </text>
              <view class="auth">
                <uv-icon name="account"></uv-icon>
                <text>{{ userInfo.account }}</text>
                <uv-text type="info" :plain="true" margin="10rpx" :text="userInfo.roleName"></uv-text>
              </view>
            </view>
          </view>
          <view class="user-right" @click="goSet">
            <image src="@/static/set.png"></image>
          </view>
        </view>
      </view>

      <view class="content">

        <!-- 订单 -->
        <view class="order">
          <view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goItem(item)">
            <uv-image :src="item.icon" width="60rpx" height="60rpx"></uv-image>
            <uv-text type="info" margin="5rpx" :text="item.text"></uv-text>
          </view>
        </view>
        <!-- 服务 -->
        <view class="service">
          <view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="goItem(item)">
            <view class="service-item-left">
              <uv-image :src="item.icon" width="40rpx" height="40rpx"></uv-image>
              <uv-text type="info" margin="5rpx" :text="item.text" v-if="item.isLink"></uv-text>
              <uv-text type="info" margin="5rpx" :text="item.text" openType="share" v-else></uv-text>
            </view>
            <image class="right-icon" src="/static/right.png" v-if="item.isLink"></image>
          </view>

          <view class="service-item">
            <view class="service-item-left">
              <uv-image src="/static/mine/share.png" width="40rpx" height="40rpx"></uv-image>
              <uv-text type="info" margin="5rpx" text="分享好友" openType="share"></uv-text>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom">
        <view class="button" @click="logout()">
          {{ logoutText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import AuthAPI from '@/api/auth'

export default {
  data() {
    return {
      userInfo: {},
      logoutText: '去登录',
      authority: 'employee', // admin、employee、store_manager、dept_manager
      roleName: '',
      orderList: [],
      serviceList: []
    };
  },
  onLoad() {
    this.info()
  },
  methods: {
    goItem(item) {
      if (item.isLink) {
        uni.navigateTo({
          url: item.url
        })
      }
    },

    logout() {
      AuthAPI.Logout().then(res => {
        uni.clearStorageSync()
        uni.navigateTo({
          url: '/pages/login/login'
        })
      })
    },
    info() {
      this.userInfo = uni.getStorageSync('authInfo')
      if (this.userInfo.authority) {
        this.logoutText = '退出登录'
        this.authority = this.userInfo.authority
        this.userInfo.roleName = uni.getStorageSync('userInfo')?.roleName
        this.userInfo.deptName = uni.getStorageSync('userInfo')?.deptName
      }
      this.orderList = [
        {
          icon: '/static/mine/purchase.png',
          text: '去采购',
          url: '/subpackage/purchase/purchase',
          isLink: true,
        }
      ]
      if (!this.authority.includes('employee')) {
        const list = [{
          icon: '/static/mine/attendance.png',
          text: '考勤管理',
          url: '/subpackage/attendance/attendance',
          isLink: true,
        }, {
          icon: '/static/mine/task.png',
          text: '任务下发',
          url: '/subpackage/task/task',
          isLink: true,
        }]
        this.orderList.push(...list)
      }

      this.serviceList = [{
        icon: '/static/mine/commodity.png',
        text: '采购管理',
        url: '/subpackage/commodity/commodity',
        isLink: true,
      },{
        icon: '/static/mine/reportedloss.png',
        text: '报损记录',
        url: '/subpackage/reportedloss/reportedloss',
        isLink: true,
      }]
      if (!this.authority.includes('employee')) {
        const list = [{
          icon: '/static/mine/rewardpenalty.png',
          text: '奖罚记录',
          url: '/subpackage/rewardpenalty/rewardpenalty',
          isLink: true,
        },{
          icon: '/static/mine/commoditysummary.png',
          text: '到货汇总',
          url: '/subpackage/commoditysummary/commoditysummary',
          isLink: true,
        }]
        this.serviceList.push(...list)
      }
    },
    goSet() {
      uni.navigateTo({
        url: '/pages/mine/set'
      })
    },
    onShareAppMessage(res) {
      const path = '/pages/index/index';
      return {
        title: "绩效考核",
        path: path
      }
    },
    onShareTimeline: function () {
      return {
        title: "绩效考核",
        query: 'where=share'
      }
    },
  },

}
</script>

<style scoped lang="scss">
/* 方案 2：伪元素实现（推荐，避免内容层级问题） */
.container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("https://restaurant-saas.oss-cn-heyuan.aliyuncs.com/upload/20250208/cf7885d058055011addc5864609b1dc1.png");
  background-size: cover;
  background-position: center top;
  z-index: -1; /* 将背景置于内容下方 */
}

.header {
  opacity: 1;
  height: 360rpx;
}

.user {
  padding: 64rpx 40rpx 40rpx 40rpx;
  display: flex;
  justify-content: space-between;
  width: 686rpx;
  align-items: center;
  margin-bottom: 20rpx;

  .user-left {
    display: flex;
    align-items: center;

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .user-info {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;

      .nickname {
        font-size: 28rpx;
        font-weight: 600;
        color: #373948;
      }

      .auth {
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        text {
          font-size: 22rpx;
          margin-left: 6rpx;
          color: #555555;
        }
      }
    }
  }

  .user-right {
    display: flex;
    align-items: center;
    margin-right: 40rpx;

    image {
      width: 37rpx;
      height: 34rpx;
    }
  }
}

.content {
  padding: 40rpx;
  margin-top: -140rpx;
}

.order {
  position: relative;
  border-radius: 20rpx;
  background: #FFFFFF;
  box-shadow: 0 16rpx 50rpx #E9EFF5;
  padding: 36rpx 32rpx 32rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -62rpx;

  .order-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 44rpx;
      height: 44rpx;
    }

    text {
      font-size: 26rpx;
      color: #9EA391;
      margin-top: 20rpx;
    }
  }
}

.service {
  border-radius: 20rpx;
  background: #FFFFFF;
  padding: 10rpx 40rpx;
  box-shadow: 0 0 50px #F2F5E9;
  margin-top: 60rpx;

  .service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;

    .service-item-left {
      display: flex;
      align-items: center;
    }

    .right-icon {
      width: 12rpx;
      height: 24rpx;
    }
  }

  .service-item:not(:last-child) {
    border-bottom: 1rpx solid #F6F7F0;
  }
}

.bottom {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 160rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  .button {
    width: 686rpx;
    height: 92rpx;
    background: $custom-btn-color;
    border-radius: 46rpx;
    line-height: 92rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
  }
}
</style>